<template>
  <div id="detailList">
      <ul>
          <li :class="{'border_bottom': true,'border_left': (index%3 === 0? false : true)}" v-for="(item,index) in list" :key="item.cate2Id" @click="toRoomList(item)">
          <div>
              <img :src="item.icon" alt=""> 
          </div>
          <p>{{item.cate2Name}}</p>
          </li>
      </ul>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: 'detailList',
  data () {
    return {
      list:[]
    }
  },
  created () {
    this.getList()
  },
  computed:{
    ...mapState(['cate1Id','cate2Id','cate2Name','shortName'])
  },
  methods: {
    ...mapMutations(['setcate1','setcate2',"setcatename",'setshortName']),
    getList(){
      this.$http.get('/api/cate/list').then(res=>{
        // console.log(res)
          var arr=res.data.data.cate2Info
        for(var i=0;i<arr.length;i++){
            if(arr[i].cate1Id==this.$route.query.id){
                this.list.push(arr[i])
            }
        }
        // console.log(this.list)
      })
    },

    toRoomList(item){
      sessionStorage.cate1Id=item.cate1Id
      sessionStorage.cate2Id=item.cate2Id
      sessionStorage.cate2Name=item.cate2Name
      sessionStorage.shortName=item.shortName
      this.setcate1(item.cate1Id)
      this.setcate2(item.cate2Id)
      this.setcatename(item.cate2Name)
      this.setshortName(item.cate1Id)
      // this.$store.commit('setcate1',item.cate1Id)
      // this.$store.commit('setcate2',item.cate2Id)
      // this.$store.commit('setcatename',item.cate2Name)
      // this.$store.commit('setrefpage',0)
      // this.$store.commit('setshortName',item.shortName)
      this.$router.push({
        path:"/roomList",
      })
      // console.log(item)
    }
  }
}
</script>
<style scoped>
.border_bottom{
    border-bottom: .01rem dotted rgb(221, 221, 221)
}
.border_left{
    border-left: .01rem dotted rgb(221, 221, 221)
}
#detailList{
  overflow: scroll;
  height: calc(100% - 0.5rem);
  overflow-y: auto;
}
ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
ul li{
    width: 1.22rem;
    height: 1.22rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    justify-content: center;
    align-items: center;

}
ul li div{
    width: .60rem;
    height: .6rem;
    margin: .25rem 0 .05rem;
    border-radius: 50%;
    overflow: hidden;
}
ul li p{
    width: 100%;
    font-size: .12rem;
}
ul li div img{
    width: 100%;
}
</style>
